<template>
  <div>
    <images
      :use-btn="true"
      :use-type="'img'"
      :dialog-images="showImages"
      @close="close"
    />

    <div class="container">
      <div style="padding:0 50px 10px 50px;">
        <el-row>
          <el-col :span="2">
            <div class="tableTitle">
              <span style="color:#F56C6C;">*</span
              ><span style="font-size:12px">{{ title }}规格</span>
            </div>
          </el-col>
          <el-col :span="22">
            <div class="tableContent">
              <div
                v-for="(spec, index) in skuType"
                :key="index"
                class="tableItem"
              >
                <el-row class="hoverFlage">
                  <el-col :span="2" class="form-info">规格名:</el-col>
                  <el-col :span="4">
                    <el-input
                      v-model.trim.lazy="spec.type"
                      placeholder="请输入内容"
                      disabled
                    ></el-input>
                  </el-col>
                  <el-col :span="18" class="delButton hoverFlages">
                    <i
                      class="el-icon-error cursor"
                      @click="deleteType(index)"
                    ></i>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2" class="form-info">规格值:</el-col>
                  <el-col
                    v-for="(specName, specIndex) in spec.children"
                    :key="specIndex"
                    :span="4"
                    style="margin-bottom:10px;"
                    class="relative hoverFlage"
                  >
                    <el-input
                      v-model="specName.val"
                      placeholder="请输入内容"
                      disabled
                      @change="editSpec(spec.children, specName.val, specIndex)"
                    ></el-input>
                    <i
                      class="el-icon-delete delButtonItem cursor hoverFlages"
                      @click="deleteSpec(specIndex, spec.children)"
                    ></i>
                  </el-col>
                  <el-col :span="3">
                    <div v-if="spec.visible">
                      <el-autocomplete
                        v-model="newSpecName[index]"
                        popper-class="my-autocomplete"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        style="width:300px;"
                        @select="handleSelect"
                      >
                        <template slot-scope="{ item }">
                          <div class="name">{{ item.attr_name }}</div>
                          <span
                            class="addr"
                            @click.stop="delATTR(item.attr_id, 2)"
                          >
                            <i class="el-icon-error"></i
                          ></span>
                        </template>
                        <el-button
                          slot="append"
                          type="primary"
                          size="mini"
                          icon="el-icon-check"
                          style="color:#67C23A"
                          @click.stop="
                            addSpec(
                              spec.children,
                              newSpecName[index],
                              index,
                              spec.attr_id
                            );
                            spec.visible = false;
                          "
                          >&nbsp;&nbsp;</el-button
                        >
                        <el-button
                          slot="append"
                          size="mini"
                          type="text"
                          icon="el-icon-close"
                          style="color:#F56C6C"
                          @click.stop="spec.visible = false"
                          >&nbsp;&nbsp;&nbsp;</el-button
                        >
                      </el-autocomplete>

                      <div style="text-align: right;margin-top: 20px;"></div>
                    </div>
                    <el-button
                      v-else
                      type="text"
                      @click.stop="
                        addVal(spec);
                        spec.visible = true;
                        newIndex = index;
                      "
                      >添加规格值</el-button
                    >
                  </el-col>
                </el-row>
              </div>
              <div class="tableBottom">
                <el-button
                  v-if="btnShow"
                  :disabled="skuType.length === 3"
                  @click="addGG"
                  >添加规格项目</el-button
                >
                <el-autocomplete
                  v-else
                  v-model="state"
                  popper-class="my-autocomplete"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelect"
                >
                  <el-button slot="append" @click="addType(0)">新增</el-button>
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.attr_name }}</div>
                    <span class="addr" @click.stop="delATTR(item.attr_id, 1)">
                      <i class="el-icon-error"></i
                    ></span>
                  </template>
                </el-autocomplete>
                <!-- <el-button @click='addType'
                           :disabled='this.sku_type.length === 3'>添加规格项目</el-button> -->
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="m_t_20">
          <el-col :span="2">
            <div class="tableTitle">
              <span style="color:#F56C6C;">*</span
              ><span style="font-size:12px">规格明细</span>
            </div>
          </el-col>
          <el-col :span="22">
            <el-table :data="tableData" :span-method="objectSpanMethod" border>
              <el-table-column
                v-if="skuType[0]"
                prop="spec0"
                :label="skuType[0].type"
                width="180"
              >
              </el-table-column>
              <el-table-column
                v-if="skuType.length >= 2"
                prop="spec1"
                :label="skuType[1].type"
                width="180"
              >
              </el-table-column>
              <el-table-column
                v-if="skuType.length >= 3"
                prop="spec2"
                :label="skuType[2].type"
                width="180"
              >
              </el-table-column>
              <el-table-column label="销售价">
                <template slot-scope="scope">
                  <el-input-number
                    v-model.lazy="scope.row.sku_price"
                    size="small"
                    style="width:100%;"
                    :min="0.01"
                    :precision="2"
                    placeholder="请输入销售价"
                    :controls="false"
                    @blur="
                      // eslint-disable-next-line vue/camelcase
                      !scope.row.sku_price ? (scope.row.sku_price = 0.01) : ''
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="库存">
                <template slot-scope="scope">
                  <el-input-number
                    v-model.lazy="scope.row.sku_stock"
                    size="small"
                    style="width:100%;"
                    :precision="0"
                    :min="1"
                    placeholder="请输入库存"
                    :controls="false"
                    @blur="
                      // eslint-disable-next-line vue/camelcase
                      !scope.row.sku_stock ? (scope.row.sku_stock = 1) : ''
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="成本价">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.sku_original_price"
                    size="small"
                    style="width:100%;"
                    :min="0.01"
                    :precision="2"
                    placeholder="请输入成本价"
                    :controls="false"
                    @blur="
                      !scope.row.sku_original_price
                        ? // eslint-disable-next-line vue/camelcase
                          (scope.row.sku_original_price = 0.01)
                        : ''
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="重量(kg)">
                <template slot-scope="scope">
                  <el-input-number
                    v-model.lazy="scope.row.sku_weight"
                    size="small"
                    style="width:100%;"
                    :precision="0"
                    placeholder="请输入重量(kg)"
                    :controls="false"
                    @blur="
                      // eslint-disable-next-line vue/camelcase
                      !scope.row.sku_weight ? (scope.row.sku_weight = 0) : ''
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="体积(m³)">
                <template slot-scope="scope">
                  <el-input-number
                    v-model.lazy="scope.row.sku_volume"
                    size="small"
                    style="width:100%;"
                    :precision="0"
                    placeholder="请输入体积(m³)"
                    :controls="false"
                    @blur="
                      // eslint-disable-next-line vue/camelcase
                      !scope.row.sku_volume ? (scope.row.sku_volume = 0) : ''
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="封面">
                <template slot-scope="scope">
                  <div class="commodityImage clearfix">
                    <div class="icon">
                      <img
                        v-if="scope.row.cover"
                        :src="
                          $store.state.qiniu +
                            scope.row.cover +
                            $store.state.imgRotate
                        "
                        alt=""
                      />
                    </div>
                    <el-button
                      size="small"
                      type="primary"
                      @click="setImg(scope.$index)"
                      >选择图片</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="tableButton clearfix">
              <div class="title">批量设置：</div>
              <div v-if="!setAllFlage" class="button">
                <el-button
                  type="text"
                  :disabled="tableData.length == 0"
                  @click="setAll(1)"
                  >销售价</el-button
                >
                <el-button
                  type="text"
                  :disabled="tableData.length == 0"
                  @click="setAll(2)"
                  >库存</el-button
                >
                <el-button
                  type="text"
                  :disabled="tableData.length == 0"
                  @click="setAll(3)"
                  >成本价</el-button
                >
              </div>
              <div v-if="setAllFlage" class="input clearfix">
                <el-input v-model="setAllValue" size="small"></el-input>
                <el-button size="small" type="primary" round @click="setAllSuc"
                  >确定</el-button
                >
                <el-button size="small" round @click="setAllFlage = false"
                  >取消</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { ADDGOODSATTR, GOODSATTRLIST, DELGOODSATTR } from "@/service/public";

var _ = require("lodash");
export default {
  components: {
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  props: {
    attrData: {
      type: Array,
      required: true
    },
    specificationData: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    type: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showImages: false,
      application: this.$store.state.group_name,
      setAllFlage: false,
      setAllFlageSection: -1,
      setImgIndex: -1,
      setAllValue: "",
      arr: [1, 3, 5],
      visible2: false,
      defaultAddPrices: {},
      skuType: [],
      // _specs: [],
      specPrices: [],
      newSpecName: ["", "", ""],
      newIndex: "",
      val: "",
      lock: 1,
      state: "",
      btnShow: true,
      loadAll: [],
      valArr: [],
      parent_lock: false
    };
  },
  computed: {
    // 表格数据
    tableData: {
      get() {
        let arr = this.specPrices;

        for (let i = 0; i < arr.length; i++) {
          if (arr[i].sku_type[0]) {
            arr[i].spec0 = arr[i].sku_type[0].val;
            arr[i].spec0Id = arr[i].sku_type[0].valId;
          }
          if (arr[i].sku_type[1]) {
            arr[i].spec1 = arr[i].sku_type[1].val;
            arr[i].spec1Id = arr[i].sku_type[1].valId;
          }
          if (arr[i].sku_type[2]) {
            arr[i].spec2 = arr[i].sku_type[2].val;
            arr[i].spec2Id = arr[i].sku_type[2].valId;
          }
        }
        if (this.lock === 2) {
          return this.attrData;
        } else {
          return arr;
        }
      },
      set() {}
    }
  },
  watch: {
    tableData: {
      handler: function(v) {
        this.$emit("returnData", {
          attr_arrs: v,
          specifications: this.skuType
        });
      },
      deep: true
    }
  },
  created() {
    this.getATTRList();

    this.skuType = this.specificationData;
    this.lock = 2;

    // this.sku_type = []
    this.specPrices = this.tableData;

    if (this.skuType.length === 0) {
      // 初始化规格数据
      let obj = {};
      obj.type = "";
      obj.visible = false;
      obj.children = [];
      // this.sku_type.push(obj)
      let _obj = [{}];
      _obj[0].sku_type = [{ val: "", valId: "" }];
      // _obj[0].prices = {
      //   sku_price: 0,
      //   sku_stock: 0,
      //   sku_original_price: 0,
      //   cover: ''
      // }
      _obj[0].sku_price = 0;
      _obj[0].sku_stock = 0;
      _obj[0].sku_original_price = 0;
      _obj[0].sku_weight = 0;
      _obj[0].sku_volume = 0;
      _obj[0].cover = "";
      this.specPrices = _obj;
    }
  },

  methods: {
    querySearch(queryString, cb) {
      let restaurants;
      if (this.parent_lock) {
        restaurants = this.valArr;
      } else {
        restaurants = this.loadAll;
      }

      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    handleSelect(item) {
      if (this.parent_lock) {
        this.newSpecName[this.newIndex] = item.attr_name;
      } else {
        this.state = item.attr_name;
      }
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.attr_name
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    async delATTR(attrId, i) {
      this.btnShow = true;
      let r = confirm("确认删除规格?");

      if (r) {
        await DELGOODSATTR({ attr_id: attrId }).then(({ code, msg }) => {
          if (code === 200) {
            if (i === 1) {
              this.loadAll.some((eles, i) => {
                if (eles.attr_id === attrId) {
                  this.loadAll.splice(i, 1);
                  return true;
                }
              });
            } else {
              this.valArr.some((eles, i) => {
                if (eles.attr_id === attrId) {
                  this.valArr.splice(i, 1);
                  return true;
                }
              });
            }
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      }
    },
    async getATTRList(parentId) {
      let locks;
      await GOODSATTRLIST({ parent_id: parentId, type_id: this.type[1] }).then(
        ({ code, data }) => {
          if (code === 200) {
            if (parentId) {
              this.valArr = data.list;
              this.parent_lock = true;
            } else {
              this.loadAll = data.list;
              this.parent_lock = false;
            }
            locks = true;
          } else {
            if (parentId) {
              this.valArr = [];
              this.parent_lock = true;
            }
            locks = false;
          }
        }
      );
      return locks;
    },
    close(file) {
      this.showImages = false;
      if (!file) return;
      this.tableData[this.setImgIndex].cover = file.file_path;
    },
    setImg(index) {
      this.setImgIndex = index;
      this.showImages = true;
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.skuType[1] && !this.skuType[2]) {
          if (rowIndex % this.skuType[1].children.length === 0) {
            return {
              rowspan: this.skuType[1].children.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        } else if (this.skuType[1] && this.skuType[2]) {
          if (
            rowIndex %
              (this.skuType[1].children.length *
                this.skuType[2].children.length) ===
            0
          ) {
            return {
              rowspan:
                this.skuType[1].children.length *
                this.skuType[2].children.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
      if (columnIndex === 1) {
        if (this.skuType[2]) {
          if (rowIndex % this.skuType[2].children.length === 0) {
            return {
              rowspan: this.skuType[2].children.length,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    setAll(falge) {
      this.setAllFlage = true;
      this.setAllFlageSection = falge;
    },
    setAllSuc() {
      switch (this.setAllFlageSection) {
        case 1:
          this.tableData.forEach(ele => {
            ele.sku_price = this.setAllValue;
          });
          break;
        case 2:
          this.tableData.forEach(ele => {
            ele.sku_stock = this.setAllValue;
          });
          break;
        case 3:
          this.tableData.forEach(ele => {
            ele.sku_original_price = this.setAllValue;
          });
          break;
      }

      this.setAllValue = "";
      this.setAllFlage = false;
    },

    deleteType(index) {
      this.btnShow = true;
      let r = confirm("确定删除规格名么?");

      if (r) {
        this.lock = 1;
        this.skuType.splice(index, 1);
        let myDefaultAddPrices = _.cloneDeep(this.defaultAddPrices);
        //  JSON.parse(
        //   JSON.stringify(this.defaultAddPrices)
        // )
        this.mySpecPrices(this.specCombinations(), myDefaultAddPrices);
      }
    },
    deleteSpec(index, spec) {
      this.btnShow = true;
      this.lock = 1;
      spec.splice(index, 1);
      // 刷新 mySpecPrices
      let myDefaultAddPrices = _.cloneDeep(this.defaultAddPrices);
      //  JSON.parse(
      //   JSON.stringify(this.defaultAddPrices)
      // )
      this.mySpecPrices(this.specCombinations(), myDefaultAddPrices);
    },
    async getAddSATTR(attrName, parentId) {
      let objs = {};
      let jsons;
      await ADDGOODSATTR({
        attr_name: attrName,
        parent_id: parentId,
        type_id: this.type[1]
      }).then(({ code, msg }) => {
        if (code === 200) {
          objs.attr_id = msg;
          objs.attr_name = this.state;
          objs.lock = true;
        } else if (code === -909) {
          jsons = JSON.parse(msg);
          objs.attr_id = jsons.attr_id;
          objs.attr_name = jsons.attr_name;
          objs.lock = true;
        } else {
          objs.lock = false;
          this.$message.error(msg);
        }
      });
      if (JSON.stringify(objs) !== "{}") {
        return objs;
      }
    },
    addGG() {
      let args = this.skuType[this.skuType.length - 1];
      if (args) {
        if (args.children.length > 0) {
          this.btnShow = false;
        } else {
          this.$message.error("请填写规格值！");
          return;
        }
      } else {
        this.btnShow = false;
      }
      this.getATTRList().then(res => {
        if (res) {
          this.skuType.forEach(ele => {
            this.delArr(ele);
          });
        }
      });
    },
    delArr(ele) {
      this.loadAll.forEach((eles, i) => {
        if (eles.attr_name === ele.attr_name) {
          this.loadAll.splice(i, 1);
        }
      });
    },
    addType(parentId) {
      let locks = true;
      let lockss = true;
      let obj = {};
      this.skuType.forEach(ele => {
        if (this.state === ele.type) {
          this.$message.error("规格已存在");
          lockss = false;
          locks = false;
        }
      });
      if (lockss) {
        this.getAddSATTR(this.state, parentId).then(res => {
          obj.attr_id = res.attr_id;
          obj.attr_name = res.attr_name;
          locks = res.lock;
          if (locks) {
            this.btnShow = true;
            this.lock = 1;
            obj.type = this.state;
            obj.visible = false;
            obj.children = [];
            this.skuType.push(obj);
            let myDefaultAddPrices = _.cloneDeep(this.defaultAddPrices);
            // JSON.parse(
            //   JSON.stringify(this.defaultAddPrices)
            // )
            let specCombinations = this.specCombinations();
            this.mySpecPrices(specCombinations, myDefaultAddPrices);
            this.state = "";
          }
        });
      }
    },
    editSpec(spec, newSpecName, index) {
      if (!newSpecName) {
        alert("规格项名称不能为空");
        return;
      } else if (spec.includes(newSpecName)) {
        alert("规格项名称不能为重复");
        return;
      }
      spec[index].val = newSpecName;

      let myDefaultAddPrices = _.cloneDeep(this.defaultAddPrices);
      //  JSON.parse(
      //   JSON.stringify(this.defaultAddPrices)
      // )
      let specCombinations = this.specCombinations();
      this.mySpecPrices(specCombinations, myDefaultAddPrices);
      this.newSpecName[index] = "";
    },
    addSpec(spec, newSpecName, index, parentId) {
      let locks = true;
      this.lock = 1;
      spec.forEach(ele => {
        if (ele.val === newSpecName) {
          this.$message.error("规格项名称不能为重复!");
          locks = false;
        }
      });
      // if (!newSpecName) {
      //   alert('规格项名称不能为空')

      //   return
      // } else if (spec.includes(newSpecName)) {
      //   alert('规格项名称不能为重复')

      //   return
      // }
      if (locks) {
        this.getAddSATTR(newSpecName, parentId).then(res => {
          if (res.lock) {
            spec.push({ val: newSpecName, valId: res.attr_id });
            let myDefaultAddPrices = _.cloneDeep(this.defaultAddPrices);
            // JSON.parse(
            //   JSON.stringify(this.defaultAddPrices)
            // )
            let specCombinations = this.specCombinations();
            this.mySpecPrices(specCombinations, myDefaultAddPrices);
            this.newSpecName[index] = "";
          }
        });
      }
    },
    addVal(arr) {
      this.btnShow = true;
      this.getATTRList(arr.attr_id).then(res => {
        if (res) {
          this.valArr.forEach((ele, i) => {
            arr.children.forEach(eles => {
              if (ele.attr_name === eles.val) {
                this.valArr.splice(i, 1);
              }
            });
          });
        }
      });
    },
    // 规格组合数组
    specCombinations() {
      let arrWra = [];
      // 只有1个规格type
      if (this.skuType.length === 1) {
        let arr = this.skuType[0].children;
        if (arr.length === 0) {
          arr = [""];
        }
        for (let i = 0; i < arr.length; i++) {
          let _arr = [];
          _arr.push(arr[i]);
          arrWra.push(_arr);
        }
        return arrWra;
      }
      // 有2个规格type

      if (this.skuType.length === 2) {
        let arr1 = this.skuType[0].children;
        let arr2 = this.skuType[1].children;
        if (arr1.length === 0) {
          arr1 = [""];
        }
        if (arr2.length === 0) {
          arr2 = [""];
        }
        let arr = [];
        for (let t = 0; t < arr1.length; t++) {
          for (let i = 0; i < arr2.length; i++) {
            arr = [];
            arr.push(arr1[t]);
            arr.push(arr2[i]);
            arrWra.push(arr);
          }
        }
        return arrWra;
      }
      // 有3个规格type
      if (this.skuType.length === 3) {
        let arr1 = this.skuType[0].children;
        let arr2 = this.skuType[1].children;
        let arr3 = this.skuType[2].children;
        // 判断arr1是否为[], 如果是 为其添加个空字符串占位
        if (arr1.length === 0) {
          arr1 = [""];
        }
        if (arr2.length === 0) {
          arr2 = [""];
        }
        if (arr3.length === 0) {
          arr3 = [""];
        }
        let arr = [];
        for (let t = 0; t < arr1.length; t++) {
          for (let i = 0; i < arr2.length; i++) {
            for (let s = 0; s < arr3.length; s++) {
              arr = [];
              arr.push(arr1[t]);
              arr.push(arr2[i]);
              arr.push(arr3[s]);
              arrWra.push(arr);
            }
          }
        }
        return arrWra;
      }
    },
    // 规格价格数据 local
    // 数据更新
    mySpecPrices(specCombinations) {
      let arrWra = [];
      let arr = specCombinations;
      for (let i = 0; i < arr.length; i++) {
        // 新增 规格价格 项
        let obj = {};
        obj.sku_type = arr[i];
        // !注意 a类型为数组
        // 对比 新的 规格组合数组 与原价格数组
        let oldItem = this.specPrices.filter(element => {
          let a = JSON.stringify(element.sku_type);
          let b = JSON.stringify(arr[i]);
          return a === b;
        });
        // let newItem = this.specPrices.filter((element, index) => {
        //   let a = JSON.stringify(element.sku_type)
        //   let b = JSON.stringify(arr[i])
        //   return a != b
        // })
        // 注意这里用的是length因为 空数组,空对象的布尔值为true
        // 旧规各项价格

        if (oldItem.length) {
          // obj.prices = oldItem[0].prices
          obj.sku_price = oldItem[0].sku_price;
          obj.sku_stock = oldItem[0].sku_stock;
          obj.sku_original_price = oldItem[0].sku_original_price;
          obj.cover = oldItem[0].cover;
          obj.sku_weight = oldItem[0].sku_weight;
          obj.sku_volume = oldItem[0].sku_volume;
        } else {
          // newItem[0].sku_price = 0
          // newItem[0].sku_stock = 0
          // newItem[0].sku_original_price = 0
          // newItem[0].cover = ''
          // newItem[0].sku_weight = 0
          // newItem[0].sku_volume = 0

          obj.sku_price = 0;
          obj.sku_stock = 0;
          obj.sku_original_price = 0;
          obj.cover = "";
          obj.sku_weight = 0;
          obj.sku_volume = 0;
        }
        arrWra.push(obj);
      }

      this.specPrices = arrWra;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  color: #595961;
  text-align: left;
  // background: #f5f5f5;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 20px;
  .itemTitle {
    background-color: #fafafa;
    padding: 10px;
    margin-bottom: 30px;
    border-radius: 6px;
  }
  .commodityImage {
    .icon {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      display: block;
      float: left;
      margin-right: 10px;
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #fff;
      img {
        width: 40px;
        height: 40px;
      }
    }
    input {
      float: left;
    }
  }
}

.tableTitle {
  padding: 10px 0;
  text-align: center;
  line-height: 40px;
}
.tableContent {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  background: #fff;
  .tableItem .el-row:first-child {
    background-color: #f3f3f3;
  }
  .tableBottom {
    padding: 10px;
  }
  .tableItem {
    .el-row {
      padding: 10px 0;
      text-align: center;
      line-height: 40px;
      .el-col {
        padding: 0 10px;
      }
      .el-col:first-child,
      .el-col:last-child {
        padding: 0;
      }
    }
  }
}
.el-table--border,
.el-table--group {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.el-radio-group {
  margin: 0 !important;
}
.hoverFlage .hoverFlages {
  display: none;
}
.hoverFlage:hover .hoverFlages {
  display: block;
}
.delButtonItem {
  position: absolute;
  top: 12px;
  right: 22px;
}
.delButton {
  text-align: left;
}
.tableButton {
  background: #fff;
  border: 1px solid #ebeef5;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: 0;
  font-size: 14px;
  padding-left: 10px;
  .button,
  .input,
  .title {
    float: left;
  }
  .title {
    line-height: 40px;
    margin: 0 !important;
    font-size: 12px !important;
  }
  .input {
    height: 40px;
    line-height: 40px;
    .el-button,
    .el-input {
      float: left;
      width: auto;
    }
    .el-button {
      margin: 4px 10px;
    }
    .el-input {
      width: 80px;
    }
  }
}
.lookInput {
  padding-top: 30px;
  padding-left: 80px;
  .el-input {
    width: auto;
  }
}
i.cursor {
  cursor: pointer;
}
.relative {
  position: relative;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.m_t_20 {
  margin-top: 30px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      width: 80%;
      text-overflow: ellipsis;
      overflow: hidden;
      float: left;
    }
    .addr {
      width: 10%;
      font-size: 14px;
      color: #b4b4b4;
      padding-left: 10px;
      float: left;
    }
  }
}
</style>
